<template>
<div class="had" v-loading="loading">
  <div class="breadNav">
    <el-breadcrumb separator="/" class="">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>办结业务</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="holdmenu">
    <template>
  <el-table
    ref="multipleTable"
    :data="tableData4"
    border
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="来源" width="120"
      prop="RecordOrigin">
      <template scope="scope">
       <span>{{scope.row.sounce}}</span>
     </template>
    </el-table-column>
    <el-table-column prop="State" label="状态"  width="100">
      <template scope="scope">
        <div v-if="scope.row.State == 0">待处理</div>
        <div v-if="scope.row.State < 4 && scope.row.State >= 1">处理中</div>
        <div v-if="scope.row.State == 4">待回访</div>
        <div v-if="scope.row.State == 5">已结束</div>
     </template>
    </el-table-column>
    <el-table-column prop="Type" label="服务类型" show-overflow-tooltip width="100">
    </el-table-column>
    <el-table-column prop="Item" label="服务项目" show-overflow-tooltip width="100">
    </el-table-column>
    <el-table-column prop="AppealNum" label="诉求单号" show-overflow-tooltip width="170">
    </el-table-column>
    <el-table-column prop="AppealContent" label="描述">
      <template scope="scope">
      <div class="holddes">{{ scope.row.AppealContent }}</div>
     </template>
    </el-table-column>
    <el-table-column prop="AddTime" label="时间" show-overflow-tooltip width="100">
    </el-table-column>
    <el-table-column prop="Level" label="级别" show-overflow-tooltip width="100">
      <template scope="scope">
        <div v-if="scope.row.Level == 0">一般</div>
        <div v-if="scope.row.Level == 1">重要</div>
        <div v-if="scope.row.Level == 2">紧急</div>
     </template>
    </el-table-column>
    <el-table-column prop="OutTime" label="超时时间" show-overflow-tooltip width="100">
      <template scope="scope">
        <div v-if="scope.row.OutTime == 0">未超时</div>
        <div v-if="scope.row.OutTime == 1">即将超时</div>
        <div v-if="scope.row.OutTime == 2">已超时</div>
     </template>
    </el-table-column>
    <el-table-column prop="work" label="操作" width="100">
      <template scope="scope">
        <el-button type="text" size="small" @click="urge(scope.row)" v-if="custype == 1 || custype == 3">催办</el-button>
        <el-button type="text" size="small" @click="examine(scope.row)" v-if="custype == 3">审核</el-button>
        <el-button type="text" size="small" @click="feedback(scope.row)" v-if="custype == 1 || custype == 0">反馈</el-button>
     </template>
    </el-table-column>
    </el-table>
</template>
<div style="margin-top: 20px">
  <el-button @click="allurge()">批量催办</el-button>
  <!-- <el-button >批量反馈</el-button>
  <el-button >批量导出</el-button> -->
  <el-pagination
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="currentPage4"
     :page-sizes="[10, 15, 20]"
     :page-size="row"
     layout="total, sizes, prev, pager, next, jumper"
     :total="total" style="float:right;margin-top:5px">
   </el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
  name: 'had',
  props: [
    'user',
    'custype'
  ],
  data() {
    return {
      currentPage4: 1,
      tableData4: [],
      multipleSelection: [],
      loading: false,
      page: 1,
      row: 10,
      total: 0,
      company: '',
      reguserid:0,
      RecordOrigin:'',
      FirstAppealType:''
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) { //val每页条数
      this.row = val;
      this.gethold()
    },
    handleCurrentChange(val) {  //val页码
      this.page = val;
      this.gethold()
    },
    filterTag(value, row) {
      return row.sounce === value;
    },
    gethold() {
      var data = {
        method: 'WebAppealListEx',
        RowCount: this.row,
        company: this.company,
        origin: 'WarmAppealService',
        PageNum: this.page,
        RegUserID_User:-1,
        RegUserID_Auditor:-1,
        AppealType:5,
        RecordOrigin:this.RecordOrigin,
        FirstAppealType:this.FirstAppealType
      }
      this.loading = true
      const _this = this;
      this.post(this.jholdUrl, data, function(res) { 
        _this.loading = false
        if (res.Data != null) {
          _this.tableData4 = res.Data.Data
          _this.total = res.Data.RecordCount
        }
      })
    },
    urge(row){ //催办
      var data = {
        method:'UrgeAppeal',
        origin: 'WarmAppealService',
        company:this.company,
        reguserid:this.reguserid,
        operator:this.user,
        custype:0,  //this.custype
        appealbillnum:row.AppealNum
      }
      const _this = this;
      this.post(this.jholdUrl, data, function(res) {
        if(res.Result == 0){
          _this.$message({
             message: '工单'+row.AppealNum+'催办成功',
             type: 'success'
           });
        }
      })
    },
    allurge(){
      if(this.multipleSelection == ''){
        this.$alert('请选择要批量操作的工单', '出错了', {
          confirmButtonText: '确定'
        });
        return;
      }
      for(var i=0;i<this.multipleSelection.length;i++){
          this.urge(this.multipleSelection[i])
      }
    },
    examine(row){ //审核
      localStorage.appealinfo = JSON.stringify(row)
      this.$router.push('/examine')
    },
    feedback(row){ //反馈
      localStorage.appealinfo = JSON.stringify(row)
      this.$router.push('/feedback')
    }
  },
  created() {
    let info = JSON.parse(localStorage.loginInfo);
    this.company = info.company
    this.gethold()
  }
}
</script>
<style media="screen">
.holddes {
  text-align: left;
  padding: 10px 0
}
</style>
